<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 控制 xAxis axisLabel 字体大小</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 1200px; height: 600px;"></div>
    <script>
         // 基于准备好的 DOM，初始化 echarts 实例 --- echarts 宽度不够，可能省略第一个数据axisLabel
         var myChart = echarts.init(document.getElementById('main'));
        const oldX = ['3M', '4M', '5M', '6M', '9M',   '12M', '15M',  '2Y', '30M', '3Y', '40M'];
        const oldSeries = [820, 932, 901, 934, 1501, 934, 400, 800, 1290,  1320, 900];
        console.log('2222')
       
        // 进行转化判断
        const transFormYearToMonth = (lastXEle) => {
            if (lastXEle.indexOf('Y') > -1) {
                return parseInt(lastXEle) * 12;
            } else {
                return parseInt(lastXEle)
            }
        }
        // 根据原始数据生成补充数据  oldSeriesData y 轴data, oldX x 轴的数据
        const generateData = (oldSeriesData, oldX) => {
             // 首先判断最大的月份或者年份
            const lastXEle = oldX[oldX.length - 1];
            const monthNum = transFormYearToMonth(lastXEle)
             const xAxisData = new Array(monthNum).fill(1).map((v, i) => {
                const y = (i + 1) % 12;
                if (!y) return ((i + 1)/12) + 'Y';
                return (i + 1) + 'M'
            });
            const insertedSeries = new Array(monthNum).fill(null);
    
            oldX.forEach((v ,i) => {
              const index = xAxisData.findIndex(k => k === v);
               insertedSeries[index] = oldSeries[i]
             });
    
            return {
                xAxisData: xAxisData,
                seriesData: insertedSeries
            }
        }
    
        const result = generateData( oldSeries, oldX);
             // 指定图表的配置项和数据
             var option = {
            xAxis: {
                type: 'category',
                axisTick: {
              
                   interval : function(i, v) {
                     return oldX.includes(v) ? true : false
                   }
                },
                axisLabel: {
                    overflow: false,
                   interval : function(i, v) {
                     return oldX.includes(v) ? true : false
                   },
                   textStyle: {
                        fontSize: 12 // 设置 x 轴刻度标签字体大小为 18px
                    }
                //    formatter: function (value) {
                //         const arr = [value.slice(0, -1), value.slice(-1)]
                //         return arr.join('\n'); 
                //     }
                },
                data: oldX
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
               show: true
            },
            series: [{
                data: oldSeries,
                type: 'line',
                connectNulls: true
            }]
        };
    
        option.xAxis.data = result.xAxisData;
        option.series[0].data = result.seriesData;
    
        // optionx.Axis.axisLabel.formatter = function(value, index) {
        //     return result.seriesData[index]
        // }
        myChart.setOption(option);
    </script>
</body>

</html>